<template>
  <div class="chart-container">
    <div class="chart-title" style="display: flex; justify-content: space-between; align-items: center; padding: 16px;">
      <h2 style="font-size: 16px">接诊人数趋势</h2>
      <el-radio-group v-model="chartType" class="chart-radio" size="default" @change="updateChart">
        <el-radio-button label="line">近7天</el-radio-button>
        <el-radio-button label="bar">近30天</el-radio-button>
      </el-radio-group>
    </div>
    <el-divider style="margin: 0;"></el-divider>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, inject, nextTick } from 'vue'
import * as echarts from 'echarts'
import { debounce } from 'lodash'

const props = defineProps({
  xAxisData7Days: {
    type: Array,
    default: () => ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
  },
  xAxisData30Days: {
    type: Array,
    default: () => ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12', '12-13', '12-14', '12-15', '12-16', '12-17', '12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24', '12-25', '12-26', '12-27', '12-28', '12-29', '12-30']
  },
  yAxisData7Days: {
    type: Array,
    default: () => [1300, 900, 1500, 1800, 1000, 2002, 2500]
  },
  yAxisData30Days: {
    type: Array,
    default: () => [1000, 100, 1500, 1008, 2000, 2002, 2050, 2080, 300, 3002, 305, 3008, 400, 420, 450, 408, 500, 502, 505, 580, 600, 602, 65, 68, 700, 702, 75, 708, 800, 802]
  }
})

const chartRef = ref(null)
const chartType = ref('line')
let chart = null

// 注入 resize 方法
const resizeCharts = inject('resizeCharts')

const updateChart = () => {
  const isDark = document.documentElement.classList.contains('dark')
  const option = {
    backgroundColor: isDark ? '#1f1f1f' : '#ffffff',
    textStyle: {
      color: isDark ? '#e5eaf3' : '#303133'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: isDark ? '#1f1f1f' : '#ffffff',
      borderColor: isDark ? '#363637' : '#dcdfe6',
      textStyle: {
        color: isDark ? '#e5eaf3' : '#303133'
      }
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartType.value === 'line' ? props.xAxisData7Days : props.xAxisData30Days,
      axisLine: {
        lineStyle: {
          color: isDark ? '#4c4d4f' : '#dcdfe6'
        }
      },
      axisLabel: {
        color: isDark ? '#e5eaf3' : '#303133'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: isDark ? '#363637' : '#ebeef5'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      axisLabel: {
        formatter: '{value}元',
        color: isDark ? '#e5eaf3' : '#303133'
      },
      splitLine: {
        lineStyle: {
          color: isDark ? '#363637' : '#ebeef5'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: isDark ? '#4c4d4f' : '#dcdfe6'
        }
      }
    },
    series: [
      {
        name: '接诊人数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#409EFF',
          borderColor: isDark ? '#1f1f1f' : '#ffffff',
          borderWidth: 1.5
        },
        lineStyle: {
          color: '#409EFF',
          width: 3
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(64,158,255,0.4)' },
              { offset: 1, color: 'rgba(64,158,255,0.1)' }
            ]
          )
        },
        data: chartType.value === 'line' ? props.yAxisData7Days : props.yAxisData30Days
      }
    ]
  }
  chart.setOption(option)
}

onMounted(() => {
  nextTick(() => {
    chart = echarts.init(chartRef.value)
    updateChart()
  })

  // 使用防抖处理 resize 事件
  const handleResize = debounce(() => {
    if (chart) {
      chart.resize()
    }
  }, 100)

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (chart) {
      chart.dispose()
      chart = null
    }
  })
})

watch(chartType, () => {
  updateChart()
})

// 监听主题变化
watch(() => document.documentElement.classList.contains('dark'), (isDark) => {
  if (chart) {
    updateChart()
  }
}, { immediate: true })

// 添加更新主题的方法
const updateTheme = (theme) => {
  if (chart) {
    const option = chart.getOption()
    // 根据主题更新配置
    if (theme === 'dark') {
      option.backgroundColor = '#1a1a1a'
      option.textStyle = { color: '#fff' }
    } else {
      option.backgroundColor = '#fff'
      option.textStyle = { color: '#333' }
    }
    chart.setOption(option)
  }
}

// 只保留一个 defineExpose，包含所有需要暴露的内容
defineExpose({
  chart,
  updateTheme
})
</script>

<style scoped>
.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-title {
  height: 52px;  /* 固定标题高度 */
  padding: 16px !important;
}

.el-divider {
  margin: 0 !important;
}

.chart {
  flex: 1;
  height: calc(100% - 52px) !important;  /* 减去标题的高度 */
}

/* 移除自定义的 fill 和 text-color 属性，使用 Element Plus 默认的主题色 */
.chart-radio :deep(.el-radio-button__inner) {
  background-color: var(--el-bg-color);
  border-color: var(--el-border-color);
  color: var(--el-text-color-regular);
}

.chart-radio :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
  color: #ffffff;
  box-shadow: -1px 0 0 0 var(--el-color-primary);
}

.chart-radio :deep(.el-radio-button__inner:hover) {
  color: var(--el-color-primary);
}
</style>
